export const NODE_WIDTH = 256;
export const NODE_HEIGHT = 155;
export const NODE_INPUT_REPO = 72;
export const CONNECTED_EGRESS_NODE_HEIGHT = 103;

export const FOOTER_HEIGHT = 32;
export const BORDER_WIDTH = 2;

export const BUTTON_HEIGHT = 32;
export const BUTTON_MARGIN = 4;
export const STATUS_BUTTON_HEIGHT = 48;
export const STATUS_BUTTON_WIDTH = (NODE_WIDTH - BUTTON_MARGIN * 3) / 2;
export const CONNECTED_BUTTON_WIDTH = NODE_WIDTH - BUTTON_MARGIN * 4;

export const BORDER_RADIUS = 3;
export const BUTTON_WIDTH = NODE_WIDTH - BUTTON_MARGIN * 2;
export const BUTTON_X_LENGTH = BUTTON_WIDTH - BORDER_RADIUS * 2;
export const BUTTON_Y_LENGTH = BUTTON_HEIGHT - BORDER_RADIUS;

export const BORDER_RADIUS_TOP_LEFT = `q0,-${BORDER_RADIUS} ${BORDER_RADIUS},-${BORDER_RADIUS}`;
export const BORDER_RADIUS_TOP_RIGHT = `q${BORDER_RADIUS},0 ${BORDER_RADIUS},${BORDER_RADIUS}`;
export const BORDER_RADIUS_BOTTOM_RIGHT = `q${BORDER_RADIUS},0 ${BORDER_RADIUS},-${BORDER_RADIUS}`;
export const BORDER_RADIUS_BOTTOM_LEFT = `q0,${BORDER_RADIUS} ${BORDER_RADIUS},${BORDER_RADIUS}`;

export const TOP_ROUNDED_BUTTON_PATH = `M0,${
  BUTTON_Y_LENGTH + BUTTON_MARGIN
} v-${
  BUTTON_Y_LENGTH - 1
} ${BORDER_RADIUS_TOP_LEFT} h${BUTTON_X_LENGTH} ${BORDER_RADIUS_TOP_RIGHT} v${
  BUTTON_Y_LENGTH - 1
} z`;
export const BOTTOM_ROUNDED_BUTTON_PATH = `M0,0 v${BUTTON_Y_LENGTH} ${BORDER_RADIUS_BOTTOM_LEFT} h${BUTTON_X_LENGTH} ${BORDER_RADIUS_BOTTOM_RIGHT} v-${BUTTON_Y_LENGTH} z`;

export const REPO_GRADIENT_MASK = `M0,${NODE_INPUT_REPO - FOOTER_HEIGHT} v-${
  NODE_INPUT_REPO - FOOTER_HEIGHT - BORDER_RADIUS
} ${BORDER_RADIUS_TOP_LEFT} h${
  NODE_WIDTH - BORDER_RADIUS * 2
} ${BORDER_RADIUS_TOP_RIGHT} v${
  NODE_INPUT_REPO - FOOTER_HEIGHT - BORDER_RADIUS
} z`;

export const CONNECTED_EGRESS_GRADIENT_MASK = `M0,${
  CONNECTED_EGRESS_NODE_HEIGHT - FOOTER_HEIGHT
} v-${
  CONNECTED_EGRESS_NODE_HEIGHT - FOOTER_HEIGHT - BORDER_RADIUS
} ${BORDER_RADIUS_TOP_LEFT} h${
  NODE_WIDTH - BORDER_RADIUS * 2
} ${BORDER_RADIUS_TOP_RIGHT} v${
  CONNECTED_EGRESS_NODE_HEIGHT - FOOTER_HEIGHT - BORDER_RADIUS
} z`;

export const PIPELINE_GRADIENT_MASK = `M0,${NODE_HEIGHT - FOOTER_HEIGHT} v-${
  NODE_HEIGHT - FOOTER_HEIGHT - BORDER_RADIUS
} ${BORDER_RADIUS_TOP_LEFT} h${
  NODE_WIDTH - BORDER_RADIUS * 2
} ${BORDER_RADIUS_TOP_RIGHT} v${NODE_HEIGHT - FOOTER_HEIGHT - BORDER_RADIUS} z`;

export const textElementProps = {
  fontSize: '14px',
  fontWeight: '600',
  textAnchor: 'start',
  dominantBaseline: 'middle',
  className: 'nodeLabel',
};
